<template>
    <div>
        <span>商品名称:</span>
        <el-autocomplete
                v-model="goodsName"
                value-key="goodsName"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入内容"
                @select="handleSelect"
                clearable
        ></el-autocomplete>
        <div class=" bound handler">
            <el-button  type="primary" @click="verification" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" @click="dialogFormVisible=true">盘点录入</el-button>
        </div>
        <el-dialog style="margin-left: 20px" title="盘点录入" :visible.sync="dialogFormVisible" width="34%"
                   center>
            <el-form ref="subForm" :rules='rules' :model="subForm" label-width="100px">
                <el-form-item label="商品名称":label-width="formLabelWidth" prop="goodsName">
                    <el-autocomplete
                            v-model="goodsName"
                            value-key="goodsName"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入内容"
                            @select="handleSelect"
                            clearable
                    ></el-autocomplete>
                </el-form-item>
                <br>
                <el-form-item label="商品数量":label-width="formLabelWidth" prop="inventoryNum">
                    <el-input v-model="subForm.inventoryNum" style="width: 195px"  clearable placeholder="输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="input">确 定</el-button>
            </div>
        </el-dialog>
<!--        <span>盘点数量:</span>-->
<!--        <el-input v-model="event.inventoryNum" style="width: 150px;" clearable placeholder="输入内容"></el-input>-->

<!--        <el-button type="primary" @click="overInput">结束录入</el-button>-->
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>

                <el-table-column
                        prop="goodsName"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsUnit"
                        label="商品单位">
                </el-table-column>
                <el-table-column
                        prop="inventoryNum"
                        label="盘点数量"
                >
                </el-table-column>

                <el-table-column
                        prop="goodsNum"
                        label="现存数量"
                >
                </el-table-column>
                <el-table-column
                        prop="inventorySurplus"
                        label="盘盈"
                >
                    <template slot-scope="scope">
                    <span v-if="scope.row.inventorySurplus>'0'" style="color: red">{{ scope.row.inventorySurplus }}</span>
                    <span v-else="scope.row.inventorySurplus<='0'" style="color: green">{{ scope.row.inventorySurplus }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="inventoryLoss"
                        label="盘亏"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.inventoryLoss>='0'" style="color: green">{{ scope.row.inventoryLoss }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <!--
            size-change：选择每页显示几行
            current-change：上一页 下一页
            current-page：当前页
            page-sizes：一页显示多少行的集合
            page-size：一页显示多少行
            total：总条数
                 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'Inventory',

        mounted() {//默认第一次加载
            initTable(this)
            getGoodsName(this)
        },
        data() {
            return {
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                dialogFormVisible:false,
                subForm:{
                    inventoryNum: ''
                },
                restaurants: [],
                goodsName: '',

                timeout:  null,
                formLabelWidth:'120px',
                rules:{
                    // goodsName:[
                    //     {
                    //         required: true,
                    //         message: '商品名不能为空',
                    //         trigger: 'blur'
                    //     }
                    // ],
                    inventoryNum:[
                        {
                            required: true,
                            message: '盘点数不能为空',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            //所有的方法都要写在methods里面
            // querySearchAsync(queryString, cb) {
            //     //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示，所以我从新封装了
            //     let programs = this.programs;
            //
            //     let programList = [];
            //     for (let i = 0; i < this.programs.length; i++) {
            //         programList.push({'value': programs[i].code + ' ' + '-' + ' ' + programs[i].name})
            //     }
            //
            //     let results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList;
            //     //基本思路就是实现一个过滤器，过滤存在你输入字段的所有数据。
            //     clearTimeout(this.timeout);
            //     this.timeout = setTimeout(() => {
            //         cb(results);
            //     }, 1000 * Math.random());
            // }, createStateFilter(queryString) {
            //     return (program) => {
            //         return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            //     };
            // }, handleSelect(item) {
            //     this.event.programCode = item.value
            // },
            // setRowStyle(row){
            //     if (row.row.inventorySurplus < 0) {
            //         return 'color:red;'
            //     }else {
            //         return 'color:blue;'
            //     }
            // },
            verification(){
                initTable(this)
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    console.log(state)
                    return (state.goodsName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },






            //盘点录入
            input(){
                if(this.goodsName== null || this.goodsName === ''){
                    this.$message.error(new Error('商品名称必须填写'))
                    return false
                }
                if (this.subForm.inventoryNum == null || this.subForm.inventoryNum === '') {
                    this.$message.error(new Error('出库数量必须填写'))
                    return false
                } else {
                    let r = /^[1-9]\d*$/
                    if (!r.test(this.subForm.inventoryNum)) {
                        this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
                        return false
                    }
                }

                this.$axios.post("InputInventoryData", {
                    goodsName:this.goodsName,
                    inventoryNum:this.subForm.inventoryNum
                }).then(resp => {
                    if (resp) {
                        this.$refs['subForm'].resetFields()
                        this.dialogFormVisible=false
                        initTable(this)
                    }
                })

            },
            // //结束盘点录入
            // overInput(){
            //     this.$confirm('是否结束盘点录入?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         // this.$axios.get('delWarehouse', {
            //         //     params: {
            //         //         warehouseId: row.warehouseId
            //         //     }
            //         // }).then(resp => {
            //         //     if (resp) {
            //         //         if (resp.data == '删除成功') {
            //         //             this.$message.success(resp.data)
            //         //             initTable(this)
            //         //         } else {
            //         //             this.$message.error(resp.data)
            //         //         }
            //         //     }
            //         // })
            //     }).catch(() => {
            //         //几点取消的提示
            //     })
            // },
            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
        }

    }

    function initTable($this) {
        $this.$axios.post("getInventoryList", {
            page: $this.page,
            size: $this.size,
            goodsName:$this.goodsName
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.getInventoryList
                $this.total = resp.data.count
            }
        })
    }
    function getGoodsName($this){
        $this.$axios.post("getInventoryGoodsName").then(resp => {
            if (resp) {
                $this.restaurants = resp.data.goodsName
                console.log( JSON.stringify($this.restaurants))
            }
        })
    }
</script>

<style scoped>
    .bound{
        margin-left: 10px;
    }
    .handler{
        display: inline-block;
    }
</style>
